<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>音乐后台管理系统</title>
<!--    <link href="http://localhost:8080/ssmbuild/static/ypb/Y-backgroud/backstage.css" rel="stylesheet">-->
<!--    <link href="http://localhost:8080/ssmbuild/static/ypb/Y-backgroud/Y-user/user.css" rel="stylesheet">-->
<!--    <link href="http://localhost:8080/ssmbuild/static/ypb/Y-backgroud/font_2528121_iz4e8df3nha/iconfont.css" rel="stylesheet">-->
<!--    <link href="http://localhost:8080/ssmbuild/static/ypb/Y-backgroud/backstage.css" rel="stylesheet">-->
    <link rel="stylesheet" th:href="@{/static/ypb/Y-background/backstage.css}"   type="text/css"/>
    <link rel="stylesheet" th:href="@{/static/ypb/Y-background/Y-user/user.css}" />
    <link rel="stylesheet" type="texts" th:href="@{https://www.huangwx.cn/css/sweetalert.css}"/>
<!--    <script type="text/javascript" th:src="@{https://www.huangwx.cn/js/sweetalert-dev.js}"></script>-->

    <link rel="stylesheet" th:href="@{/static/ypb/Y-background/font_2528121_iz4e8df3nha/iconfont.css}" type="text/css"/>
    <link rel="stylesheet" th:href="@{/static/ypb/Y-background/font_2528121_66g78zut538/iconfont.css}" type="text/css"/>
</head>
<body>
       <!-- 侧边栏 -->
<div class="center">
    <div class="sidebar">
        <ul>

            <li class="side side_1"><a class="option option_1" href="#">音乐后台管理系统</a></li>

            <li class="side user" style="background-color: #1c2b3b;"><a class="option option_3" href="/future/admin/queryAllUsers" >
                <i class="iconfont icon-yonghu2"></i>
                用户管理</a></li>

            <li class="side music"><a class="option option_5" href="#">
                <i class="iconfont icon-yinle1" style="margin-right: 4px;"></i>
                音乐管理<i class="iconfont icon-jiantouxiangxia"></i></a></li>
                <div class="musicForm" style="display: none;">
                    <li class="side branch"><a th:href="@{/admin/allMusic}" class="option branch_1">音乐</a></li>
                    <li class="side branch"><a th:href="@{/admin/querySinger}" class="option branch_2">歌手</a></li>
                    <li class="side branch"><a th:href="@{/admin/queryAllAlbum}"  class="option branch_3">专辑</a></li>
                    <li class="side branch"><a th:href="@{/static/ypb/Y-background/Y-music/comment.html}" class="option branch_4">评论</a></li>
                </div>
        </ul>
    </div>
</div>
<!-- 右边内容区 -->
<div class="rightContent">
    <div class="itemBar">
        <div class="headBar">
            <p class="welcome">欢迎<span class="headPhoto"></span></p>
            <p class="back">退出登录</p>
        </div>

        <div class="headLine" >
            <input type="text" name="userName" class="input" placeholder="请输入用户名" autocomplete="off">
            <button class="ssBtn" ><i class="iconfont icon-sousuo1" ></i>搜索</button>
            <button class="reset"><i class="iconfont icon-shuaxin2"></i>重置</button>
            <button class="batch" style="margin-left: 40px">批量删除</button>
            <button class="add"><i class="iconfont icon-icon-test"></i>增加</button>
        </div>
        <!-- 用户管理 -->
        <div class="form">
            <table border="0" cellpadding="0" cellspacing="0">
                <thead>
                <tr class="formHead"  cellpadding="0" cellspacing="0">
                    <th class="alone">
                    <input type="checkbox"  name="allChecked" style="height: 17px;width: 17px" id="all">全选/取消
                    </th>
                    <th class="alone">序号</th>
                    <th class="alone">用户名</th>
                    <th class="alone">账号</th>
                    <th class="alone">性别</th>
                    <th class="alone">邮箱</th>
                    <th class="alone">用户等级</th>
                    <th class="alone">用户VIP剩余天数</th>
                    <th class="alone">操作</th>
                </tr>
                </thead>
                <tbody class="content">
                <tr class='found' th:each="user,loopStatus:${Users}" th:attr="everId=${user.userId}">
                    <td class='Ffind'><input class="choice" type="checkbox" th:value="${user.userHao}" name="ids" ></td>
                    <td class='Ffind' th:text="${loopStatus.count}">1</td>
<!--                    <td class='Ffind' th:text="${user.userId}">1</td>-->
                    <td class='Ffind' th:text="${user.userName}">1445587215</td>
                    <td class='Ffind' th:text="${user.userHao}" >22</td>
                    <td class='Ffind' th:text="${user.userGen}">22</td>
                    <td class='Ffind' th:text="${user.userEmail}">22</td>
                    <td class='Ffind' th:text="${user.userLv}">22</td>
                    <td class='Ffind' th:text="${user.userVipBal}">22</td>
                    <td class='Ffind'>
                        <button class='del'>删除</button>
                        <button class='amend'>更改</button>
                    </td>
                </tr>

                </tbody>
            </table>
            <span class="changePage">
             <button class="first">首页</button>
                 <button class="previous">上一页</button>
            前往第<input type="text" class="toPage" maxlength="2" th:value="${page}" autocomplete="off" >页/共<span class="pageAll" th:text="${sumPage}"></span>页
            <button class="next">下一页</button>
                <button class="end">尾页</button>
        </span>
        </div>
    </div>
</div>
<div class="clear"> </div>
<!-- 添加用户的弹框 -->
       <!-- 添加用户的弹框 -->
       <div class="addUser" style="display: none;">
           <table class="uForm">
               <tbody class="initial">
               <tr class="line">
                   <td>用户名：
                   <td class="_name blank"><input class="information" id="userName" type="text" placeholder="请输入用户名" autocomplete="off"></td>
               </tr>
               <tr class="line">
                   <td>账号：</td>
                   <td class="tel blank"><input class="information email" id="psw" type="email" placeholder="请输入账号" autocomplete="off"></td>
               </tr>
               <tr class="line">
                   <td>密码：</td>
                   <td class="tel blank"><input class="information account" id="userHao" type="email" placeholder="请输入密码" autocomplete="off"></td>
               </tr>


               <tr class="line">
                   <td>歌手性别：</td>
                   <td class="gender blank">
                       <select class="select selectGen">
                           <option value="男">男</option>
                           <option value="女">女</option>
                       </select></td>
               </tr>
               <tr class="line">
                   <td>邮箱：</td>
                   <td class="tel blank"><input class="information email" id="userEmail" type="email" placeholder="请输入邮箱" autocomplete="off"></td>
               </tr>

               </tbody>
           </table>
           </table>
           <button class="affirm">确认</button>
           <button class="cancel">取消</button>

       </div>
       <!--修改用户信息的框-->
       <div class="amendUser" style="display: none;">
           <table class="uForm">
               <tbody class="initial">
               <tr class="line">
                   <td>用户名：
                   <td class="_name blank"><input class="information userName" type="text"></td>
               </tr>
               <tr class="line">
                   <td>邮箱：</td>
                   <td class="tel blank"><input class="information userEmail" type="email"></td>
               </tr>

               <tr class="line">
                   <td>VIP剩余天数：</td>
                   <td class="tel blank"><input class="information userVIP" type="text"></td>
               </tr>
               <tr class="line">
                   <td>歌手性别：</td>
                   <td class="gender blank">
                       <select class="select Gen">
                           <option value="男">男</option>
                           <option value="女">女</option>
                       </select></td>
               </tr>
               <tr class="line">
                   <td>用户等级：</td>
                   <td class="userLv blank">
                       <select class="select selectLv">
                           <option value="普通用户">普通用户</option>
                           <option value="歌手">歌手</option>
                       </select>
                   </td>
               </tr>
               </tbody>
           </table>
           </table>
           <button class="affirm_2">确认</button>
           <button class="cancel_2">取消</button>
       </div>

</body>
<script th:src="@{https://cdn.bootcdn.net/ajax/libs/jquery/3.4.1/jquery.js}"></script>
<script th:src="@{/static/ypb/Y-background/backstage.js}"></script>
<script th:src="@{/static/ypb/Y-background/Y-user/user.js}"></script>

</html>